<template>
	<!-- 登录 -->
	<div id="app" class="app1">
		<router-view></router-view>
		<div class="link">
			<router-link type="primary" to="/register">立即注册</router-link>还没有账号？
		</div>
		<el-divider></el-divider>
		<el-card class="box-card">
			<div id="flexx">
				<div class="flexx-from">
					<h2>软特来福手机登录</h2>
					<div class="flexx-from1">
						<el-form ref="form" :model="form" label-width="80px">
							<el-form-item label="电话号码:">
								<el-col :span="20">
									<el-input type="text" v-model="form.name" prefix-icon="el-icon-user" placeholder="输入电话号码"></el-input>
								</el-col>
							</el-form-item>
							<el-form-item label="验证码:">
								<el-col :span="20">
									<el-input type="text" v-model="form.name" prefix-icon="el-icon-user" placeholder="输入验证码"></el-input>
								</el-col>
								<el-button type="primary" @click="onSend">发送验证码</el-button>
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="onSubmit">立即登录</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</el-card>

		<el-divider></el-divider>
	</div>
</template>

<script>
	export default {
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			onSend() {
				console.log('send')
			}
		},
		data() {
			return {
				form: {
					name: '',
					password: '',
					type: []
				},
			}
		},
		beforeRouteUpdate(to, from, next) {
			// 做一些想要做的处理...
			// this.errCode = to.params.code
			// this.info = formatErrorMsg(this.errCode)
			next() // 一定要有next
		}
	}
</script>

<style>
	.app1 {
		margin-top: 0rem;
		margin-bottom: 0rem;
		background-image: url(../assets/huaxue.png);

	}

	.link {
		display: flex;
		flex-direction: row-reverse;
		margin-right: 10%;
	}

	.flexx {
		display: flex;
		flex-direction: row;
		margin-top: 50%;
		margin-left: 50%;

	}

	.flexx-from {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.flexx-from1 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.box-card {
		margin: auto;
		width: 50%;
		height: 50%;
		top: 50%;
		left: 50%;
		padding: 6px;

	}
</style>
